<template>
    <div class="page-banner-list">
        <div class="page-banner-list__header">
            <el-button type="danger" :disabled="selectedBannerIds.length === 0" @click="handleDeleteSelected">
                删除选中
            </el-button>

            <el-button type="primary" @click="$router.push('/banner/add')">
                新增轮播图
            </el-button>

            <el-button @click="fetchData">
                <el-icon>
                    <Refresh />
                </el-icon>
            </el-button>
        </div>

        <el-table :data="displayTableData" @selection-change="onSelectionChange">
            <el-table-column type="selection" label="序号" width="80" />
            <el-table-column label="图片" width="180">
                <template #default="scope">
                    <img :src="scope.row.img" alt="" />
                </template>
            </el-table-column>
            <el-table-column prop="link" label="链接" width="180" />
            <el-table-column prop="alt" label="描述" width="180" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-popconfirm title="你确定要删除吗？" @confirm="handleDelete(scope.row.bannerid)">
                        <template #reference>
                            <el-button type="danger"> 删除 </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>

            <template #empty>
                <el-empty description="No Data" />
            </template>
        </el-table>

        <div class="page-banner-list__footer">
            <!-- 分页 -->
            <el-pagination background layout="total, prev, pager, next" v-model:current-page="page"
                :page-size="pageSize" :total="tableData.length" />
        </div>
    </div>
</template>
<script>
// 引入 api 方法
import { getBannerData, delBanner } from "@/api/banner.js";

export default {
    name: "banner-list",
    data() {
        return {
            // 存放轮播图数据
            tableData: [],
            // 当前页
            page: 1,
            // 每页显示条数
            pageSize: 10,

            // 勾选的数据的id集合
            selectedBannerIds: [],
        };
    },

    computed: {
        /**
         * 根据 page 将 tableData 裁切之后用于展示的 表格数据
         */
        displayTableData() {
            // this.tableData.slice(0, 10)
            // 1 this.tableData.slice(0, 10)
            // 2 this.tableData.slice(10, 20)
            // 3 this.tableData.slice(20, 30)
            return this.tableData.slice((this.page - 1) * 10, this.page * 10);
        },
    },

    methods: {
        /**
         * 请求数据
         */
        fetchData() {
            getBannerData().then((data) => {
                console.log("===", data);
                // 将 data.data 赋值给 tableData
                this.tableData = data.data;
            });
            // axios.get("http://localhost:3000/banners").then((response) => {
            //   const data = response.data;
            //   console.log("data", data);
            //   this.tableData = data;
            // });
        },

        /**
         * 确认删除
         */
        handleDelete(id) {
            console.log(id);

            delBanner(id).then((data) => {
                // 更新表格数据
                this.fetchData();
            });
        },

        handleDeleteSelected() {
            // 获取到选中的数据
            // 使用 this.selectedBannerIds
            this.handleDelete(this.selectedBannerIds)
        },

        /**
         * 勾选取消勾选的回调
         * abc Array 每一项就是勾选的数据对象
         */
        onSelectionChange(abc) {
            // [{bannerid: ''}] => ['']
            this.selectedBannerIds = abc.map((item) => item.bannerid);
            console.log(this.selectedBannerIds);
        },
    },

    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss" scoped>
.page-banner-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    img {
        display: block;
        height: 100px;
    }

    &__header,
    &__footer {
        padding: 10px 0;
        display: flex;
        justify-content: flex-end;
    }
   
}
</style>